<!DOCTYPE html>
<html>
<head>
    <title>Optics Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: white;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="500" height="600"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Style settings to match the original image
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 3;
        ctx.font = 'bold 24px "Times New Roman"';
        ctx.textAlign = 'left';
        ctx.textBaseline = 'middle';

        // Define key vertical positions
        const lensY = 150;
        const waterY = 250;
        const fishY = 450;

        // Draw water surface (wavy line)
        ctx.beginPath();
        ctx.moveTo(0, waterY);
        ctx.quadraticCurveTo(75, waterY - 5, 150, waterY);
        ctx.quadraticCurveTo(225, waterY + 5, 300, waterY);
        ctx.quadraticCurveTo(375, waterY - 5, 500, waterY);
        ctx.stroke();

        // Draw converging lens
        const lensX = 220;
        const lensWidth = 180;
        const lensThickness = 40;
        ctx.beginPath();
        ctx.moveTo(lensX - lensWidth / 2, lensY);
        ctx.quadraticCurveTo(lensX, lensY - lensThickness, lensX + lensWidth / 2, lensY);
        ctx.quadraticCurveTo(lensX, lensY + lensThickness, lensX - lensWidth / 2, lensY);
        ctx.stroke();

        // Draw fish
        const fishX = 180;
        const fishLen = 140;
        const fishH = 50;
        ctx.beginPath();
        // Body
        ctx.moveTo(fishX - fishLen/2, fishY);
        ctx.quadraticCurveTo(fishX, fishY - fishH/2 - 5, fishX + fishLen/2, fishY);
        ctx.quadraticCurveTo(fishX, fishY + fishH/2 + 5, fishX - fishLen/2, fishY);
        // Tail
        const tailJointX = fishX - fishLen/2;
        const tailTipX = tailJointX - 35;
        const tailTipYOffset = 25;
        ctx.moveTo(tailTipX, fishY - tailTipYOffset);
        ctx.lineTo(tailJointX, fishY);
        ctx.lineTo(tailTipX, fishY + tailTipYOffset);
        // Lateral Line
        const gillX = fishX + fishLen/2 - 30;
        ctx.moveTo(tailJointX, fishY);
        ctx.lineTo(gillX, fishY);
        // Gill
        ctx.moveTo(gillX, fishY - 12);
        ctx.lineTo(gillX, fishY + 12);
        ctx.stroke();
        // Eye
        ctx.beginPath();
        const eyeX = fishX + fishLen/2 - 18;
        ctx.arc(eyeX, fishY, 2.5, 0, 2 * Math.PI);
        ctx.fill();


        // Draw distance markers and connecting lines
        function drawBraceWithConnections(x, y1, y2, connect1X, connect1Y, connect2X, connect2Y, text) {
            const midY = (y1 + y2) / 2;
            const curveWidth = 20;
            const tipWidth = 10;
            
            // Connecting lines
            ctx.beginPath();
            ctx.moveTo(connect1X, connect1Y);
            ctx.quadraticCurveTo(x, connect1Y, x, y1 + (midY - y1) * 0.1);
            ctx.stroke();

            ctx.beginPath();
            ctx.moveTo(connect2X, connect2Y);
            ctx.quadraticCurveTo(x, connect2Y, x, y2 - (y2 - midY) * 0.1);
            ctx.stroke();
            
            // Brace
            ctx.beginPath();
            ctx.moveTo(x, y1 + (midY - y1) * 0.1);
            ctx.bezierCurveTo(x - curveWidth, y1, x - curveWidth, midY, x - tipWidth, midY);
            ctx.stroke();

            ctx.beginPath();
            ctx.moveTo(x - tipWidth, midY);
            ctx.bezierCurveTo(x - curveWidth, y2, x - curveWidth, midY, x, y2 - (y2 - midY) * 0.1);
            ctx.stroke();

            // Text Label
            ctx.fillText(text, x + 10, midY);
        }

        const braceX = 400;
        const lensRightX = lensX + lensWidth / 2;
        const fishRightX = fishX + fishLen/2;
        const waterConnectX = 320; // X-coordinate for connection point on water line

        // Top Brace: 2 ft
        drawBraceWithConnections(braceX, lensY, waterY, lensRightX, lensY, waterConnectX, waterY, '2 ft');

        // Bottom Brace: 4 ft
        drawBraceWithConnections(braceX, waterY, fishY, waterConnectX, waterY, fishRightX, fishY, '4 ft');


        // Add text labels
        ctx.textAlign = 'center';
        ctx.fillText('n = 1', 100, lensY - 30);
        ctx.fillText('n = 1.33', 100, waterY + 30);
        ctx.fillText('fish', 100, fishY);
        ctx.fillText('Fig. 1.8', canvas.width / 2, 570);

    </script>
</body>
</html>